import React, { useEffect, useState } from 'react'
import Layout from '../../components/Layout'
import { useSelector, useDispatch } from 'react-redux'
import { getUserList } from '../../store/actions/user.action'
import { Space, Table, Tag, Input, Button, message } from 'antd'
import UserModel from './UserModel'
import { UserType } from '../../api/user'
import userApi from '../../api/user'

const User = () => {
    const { userList, total, loading } = useSelector((state: any) => state.user)
    const [ page, setPage ] = useState({ pageSize: 10, current: 1 })
    const [ isModalVisible, setIsModalVisible ] = useState(false)
    const [ propFrom, setPropFrom ] = useState({
        name: '',
        nickName: '',
        phone: '',
        deptName: '',
        isMale: true,
        email: '',
    })
    const dispatch = useDispatch()
    const { Search } = Input
    const columns = [
        {
            title: '用户名',
            dataIndex: 'nickName',
            key: 'nickName'
        },
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name'
        },
        {
            title: '所属机构',
            dataIndex: 'deptName',
            key: 'deptName'
        },
        {
            title: '邮箱',
            dataIndex: 'email',
            key: 'email'
        },
        {
            title: '手机号',
            dataIndex: 'phone',
            key: 'phone'
        },
        {
            title: '状态',
            dataIndex: 'isMale',
            key: 'isMale',
            render: (isMale: boolean) => (
                <>
                    {<Tag color={isMale ? 'blue' : 'red'}> {isMale ? '正常' : '异常'} </Tag>}
                </>
            ),
        },
        {
            title: '操作',
            render: (record: UserType) => (
                <Space size="middle">
                    <span style={{color: '#1890ff', cursor: 'pointer', fontSize: '12px'}} onClick={handleUpdate.bind(this, record)}>修改</span>
                    <span style={{color: '#1890ff', cursor: 'pointer', fontSize: '12px'}} onClick={handleDelete.bind(this, record)}>删除</span>
                </Space>
            ),
        },
    ]

    useEffect(() => {
        // other code
        getTableList(page)
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    // 修改表格数据
    const handleUpdate = (record: UserType) => {
        setPropFrom(record)
        setIsModalVisible(true);
    }

    // 删除
    const handleDelete = async (record: UserType) => {
        await userApi.deleteUser(record.id)
        message.success('删除成功')
        onSearch()
    }
    // 获取用户列表
    const getTableList = (searchParams: any) => {
        dispatch(getUserList(searchParams))
    }

    // 搜索
    const onSearch = (name?: string) => {
        onTableChange({ pageSize: 10, current: 1, name })
    }
    // 分页
    const onTableChange = (page: any) => {
        setPage(page)
        getTableList({ ...page })
    }

    // 打开弹窗
    const showModal = () => {
        setPropFrom({
            name: '',
            nickName: '',
            phone: '',
            deptName: '',
            isMale: true,
            email: '',
        })
        setIsModalVisible(true);
    };

    // 按钮提交
    const handleOk = async (value: UserType) => {
        const interfaceApi = value.id ? userApi.updateUser : userApi.addUser
        const { data } = await interfaceApi(value)
        message.success(data.data.message)
        setIsModalVisible(false)
        onSearch()
    }
    
    return (
        <Layout>
            <div style={{marginBottom: '15px'}}>
                <Search placeholder="请输入姓名" onSearch={onSearch} enterButton style={{ width: 200 }} />
                <Button style={{marginLeft: '15px'}} type="primary" onClick={showModal}>新增</Button>
            </div>
            
            <Table
                dataSource={userList}
                columns={columns}
                rowKey={columns => columns.id}
                loading={loading}
                pagination={{ total, ...page, showSizeChanger: false }}
                onChange={onTableChange}
            />
            {/* 弹窗 */}
            {isModalVisible && <UserModel
                title='新增' 
                propFrom={propFrom}
                visible={isModalVisible}
                onCreate={handleOk}
                onCancel={() => setIsModalVisible(false)}
            />}
        </Layout>
    )
}

export default User
